<template>
	<view class="cardList">
		<view class="noCard" v-if="isEmpty">
			<view class="images">
				<img src="@/static/images/noCard.png" alt="">
				<view>
					暂无健康卡
				</view>
			</view>

		</view>
		<view class="yesCard" v-else>
			<view class="caedClass" v-if="mrcardList.length>0">当前默认电子健康卡</view>
			<view v-for="(item,index) in mrcardList" :key="item.id">
				<view class="card-face-container" @click="goDetails(item)" v-if="item.isjkk==1">
					<view class="card-top-info">
						<view class="card-top-org">XX省(市)卫生健康委员会</view>
						<view class="card-top-title">
							<img src="@/static/images/icon2.png" alt="" />
							<view>电子健康卡</view>
						</view>
					</view>
					<view class="card-detail-info">
						<view class="card-user-info">
							<!-- <view class="card-user-name">{{$desensitizationName(item.name)}}</view> -->
							<view class="card-user-name">{{item.name}}</view>
							<view class="card-user-id">{{$desensitizationNormalStr(item.cardNum)}}</view>
						</view>
						<view class="card-qrcode">
							<!-- <img class="card-qrcode-logo" src="/static/images/logo_.png" alt="" /> -->
							<img :src="item.qrCodeText" alt="" />
						</view>
					</view>
					<view class="card-footer">
						中华人民共和国国家卫生健康委员会监制
					</view>
				</view>
				<view class="inTheHospital" v-else @click="goDetails(item)">
					<view class="HospitalCard">
						<view class="card-detail-info">
							<view class="card-user-info">
								<view class="card-user-name">
								<!-- {{$desensitizationName(item.name)}} -->
									{{item.name}}
									<text style="font-size:0.8rem;">&nbsp;&nbsp;【院内就诊卡】</text>
								</view>
								<view class="card-user-text">就诊卡号</view>
								<view class="card-user-id">{{$desensitizationNormalStr(item.cardNum)}}</view>
							</view>
							<view class="card-qrcode">
								<!-- <img class="card-qrcode-logo" src="/static/images/logo_.png" alt="" /> -->
								<img :src="item.qrCode" alt="" />
								<!-- <canvas :id="'qrcode'+item.id" :canvas-id="'qrcode'+item.id" style="width: 150rpx;height:150rpx;"></canvas> -->
							</view>
						</view>
						<view class="upbtn flex align-center">
							<img src="@/static/images/update.png" style="width:28rpx;" alt="">
							升级为健康卡
						</view>
					</view>
				</view>
			</view>

			<view class="caedClass" v-if="cardList.length>0">非默认电子健康卡</view>
			<view v-for="(item,index) in cardList" :key="item.id">
				<view class="card-face-container" @click="goDetails(item)" v-if="item.isjkk==1">
					<view class="card-top-info">
						<view class="card-top-org">XX省(市)卫生健康委员会</view>
						<view class="card-top-title">
							<img src="@/static/images/icon2.png" alt="" />
							<view>电子健康卡</view>
						</view>
					</view>
					<view class="card-detail-info">
						<view class="card-user-info">
							<view class="card-user-name">{{item.name}}</view>
							<!-- <view class="card-user-name">{{$desensitizationName(item.name)}}</view> -->
							<view class="card-user-id">{{$desensitizationNormalStr(item.cardNum)}}</view>
						</view>
						<view class="card-qrcode">
							<img class="card-qrcode-logo" src="@/static/images/logo_.png" alt="" />
							<img src="@/static/images/qrcode.jpg" alt="" />
						</view>
					</view>
					<view class="card-footer">
						中华人民共和国国家卫生健康委员会监制
					</view>
				</view>
				<view class="inTheHospital" @click="goDetails(item)" v-else>
					<view class="HospitalCard">
						<view class="card-detail-info">
							<view class="card-user-info">
								<view class="card-user-name">
									<!--{{$desensitizationName(item.name)}}-->
									{{item.name}}
									<text style="font-size:0.8rem;">&nbsp;&nbsp;【院内就诊卡】</text>
								</view>
								<view class="card-user-text">就诊卡号</view>
								<view class="card-user-id">{{$desensitizationNormalStr(item.cardNum)}}</view>
							</view>
							<view class="card-qrcode">
								<!-- <img class="card-qrcode-logo" src="/static/images/logo_.png" alt="" />
							<img src="/static/images/qrcode.jpg" alt="" /> -->
								<!-- <u-qrcode :text="item.idNum" :size="100"></u-qrcode> -->
								<!-- <img :src="item.qrCode" alt="" /> -->
								<QrCode style="margin: 0;" :id="'QrCode'" :width="76" :height="76"
									:codeUrl="item.cardNum" />
								<!-- <canvas :id="'qrcode'+item.id" :canvas-id="'qrcode'+item.id" style="width: 150rpx;height:150rpx;"></canvas> -->
							</view>
						</view>
						<view class="upbtn flex align-center">
							<img src="@/static/images/update.png" style="width:28rpx;" alt="">
							升级为健康卡
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-button type="primary" style="width:90%;" @click.native="addHealth">添加健康卡</u-button>

		<!-- <view class="num">
			您还可以添加{{5-cardList.length-mrcardList.length}}张健康卡
		</view> -->
	</view>
</template>

<script>
	import {
		getHealthCardList,
		getPatientBaseList
	} from '@/api/card/index.js'
	import {
		encrypt,
		decrypt
	} from '@/utils/sm4Util.js'
	import {
		EventBus
	} from "@/utils/event-bus.js";
	import QrCode from '@/components/qrcode/index.vue';
	export default {
		components: {
			QrCode
		},
		data() {
			return {
				mrcardList: [], //默认卡
				cardList: [], //非默认卡
				cardType: '1', //健康卡类型
				isEmpty: false,
			}
		},
		onLoad: function(options) {
			let _that = this
			EventBus.$on('CardList', function(res) {
				_that.getList()
			})
			this.getList()
		},
		onPullDownRefresh() {
			this.getList()
		},
		methods: {
			addHealth() {
				this.$tab.navigateTo('/pages/addHealthCard/index')
			},
			goDetails(item) {
				let id = item.id.toString();
				let idNum = item.idNum.toString();
				let ids = encrypt(JSON.stringify({id:id,sfzh:idNum}));
				console.log('*****ids*******！！！====',ids)
				uni.navigateTo({
					url: '/pages/addHealthCard/cardDetails?ids='+encodeURIComponent(ids)
				})
			},
			getList() {
				let openid = uni.getStorageSync('openid') || ''
				if (this.cardType == 1) {
					getPatientBaseList({
						hospitalCode: JSON.parse(uni.getStorageSync('hospital')).hospitalCode,
						openId: openid,
					}).then(res => {
						//数据请求完成之后停止下拉刷新
						uni.stopPullDownRefresh();
						if (res.code == 200) {
							if (res.rows.length == 0) {
								this.isEmpty = true
							} else {
								this.isEmpty = false
								let mr = []
								let ca = []
								res.rows.forEach(item => {
									if (item.isDefault == 1) {
										mr.push(item)
									} else {
										ca.push(item)
									}
								})
								this.mrcardList = mr
								this.cardList = ca
							}
						}
					})
				}

			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		background-color: rgb(245, 245, 245);
		padding-bottom: 20px;
	}

	.cardList {
		.noCard {
			width: 100%;
			text-align: center;
			color: #666666;

			.images {
				width: 100%;
				margin-bottom: 20px;
				color: #666666;

				img {
					width: 55%;
					text-align: center;
				}
			}
		}

		.num {
			margin-top: 20px;
			text-align: center;
		}

		.yesCard {
			background: #f4f4f4;
			width: 100%;
			min-height: 99%;
			height: 100%;
			padding-top: 1%;
			margin-bottom: 20px;
			overflow-y: auto;

			.caedClass {
				font-size: #4d8eff;
				font-size: 0.9rem;
				margin: 15px 0;
				padding-left: 5%;
				color: #4D8EFF;
			}

			.inTheHospital {
				width: 100%;
				height: 265.5rpx;

				.HospitalCard {
					width: 90%;
					margin: 0 auto;
					padding-bottom: 10px;
					background-image: url('@/static/images/jzkbg.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;

					.upbtn {
						width: 50%;
						margin: 0 auto;
						background-color: rgb(78, 142, 255);
						border-radius: 4px;
						padding: 4px 1rem;
						display: flex;
						justify-content: center;
						margin-top: 10px;
						color: #fff;

						img {
							margin-right: 10px;
						}
					}

					.card-detail-info {
						width: 100%;
						padding: 0 1rem 0 1rem;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 1rem;
						padding-top: 0.4rem;

						.card-user-info {
							font-size: 1rem;
							color: #2B2B2B;

							.card-user-name {
								height: 1.2rem;
							}

							.card-user-text {
								margin-top: 0.5rem;
								font-size: 0.8rem;
							}

							.card-user-id {
								font-size: 1rem;
								line-height: 1rem;
								display: block;
								padding-top: .4rem;
							}
						}

						.card-qrcode {
							background: #FFFFFF;
							padding: .04rem;
							position: relative;
							margin-top: 0.5rem;

							.card-qrcode-logo {
								height: 1.2rem;
								width: 1.2rem;
								position: absolute;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);
							}

							img {
								height: 4.5rem;
								width: 4.5rem;
							}
						}
					}
				}
			}

			.card-face-container {
				width: 90%;
				margin: 0 auto;
				height: 337.5rpx;
				color: #000000;
				background-image: url('@/static/images/cardnewbg.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}

			.card-face-container .card-top-info {
				width: 100%;
				padding: 0 1rem 0 1rem;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.card-face-container .card-top-info .card-top-org {
				font-size: 0.6rem;
				line-height: 1rem;
			}

			.card-face-container .card-top-info .card-top-title {
				display: flex;
				align-items: center;
				font-size: 1rem;
				line-height: 2.8rem;
				color: #2B2B2B;
			}

			.card-face-container .card-top-info .card-top-title img {
				height: 2rem;
				width: 2rem;
				margin-right: .2rem;
			}

			.card-face-container .card-detail-info {
				width: 100%;
				padding: 0 1rem 0 1rem;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				margin-top: 1rem;
			}

			.card-face-container .card-detail-info .card-user-info {
				font-size: 1rem;
				color: #2B2B2B;
			}

			.card-face-container .card-detail-info .card-user-info .card-user-name {
				height: 1.2rem;
			}

			.card-face-container .card-detail-info .card-user-info .card-user-id {
				font-size: 1rem;
				line-height: 1rem;
				display: block;
				padding-top: .4rem;
			}

			.card-face-container .card-detail-info .card-qrcode {
				background: #FFFFFF;
				padding: .04rem;
				position: relative;
			}

			.card-face-container .card-detail-info .card-qrcode .card-qrcode-logo {
				height: 1.2rem;
				width: 1.2rem;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.card-face-container .card-detail-info .card-qrcode img {
				height: 4.5rem;
				width: 4.5rem;
			}

			.card-face-container .card-footer {
				font-size: 0.6rem;
				white-space: nowrap;
				letter-spacing: 0;
				margin-top: 1rem;
				text-align: center;
			}
		}
	}
</style>